<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布视频</title>
    <!--    bootstrap-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!--    summernote-->
    <link href="/css/summernote.css" rel="stylesheet">
    <script src="/js/summernote.js"></script>
    <style>
        /* The alert message box */
        .alert {
            padding: 20px;
            background-color: #f44336; /* Red */
            color: white;
            margin-bottom: 15px;
        }

        /* The close button */
        .closebtn {
            margin-left: 15px;
            color: white;
            font-weight: bold;
            float: right;
            font-size: 22px;
            line-height: 20px;
            cursor: pointer;
            transition: 0.3s;
        }

        /* When moving the mouse over the close button */
        .closebtn:hover {
            color: black;
        }
    </style>
</head>
<body>
<div id="app">
    <!--导航栏-->
    <!-- Links -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html">今日头条</a>
            </div>
            <div>
                <!--向右对齐-->
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            发布作品 <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="./publish_article.html">发布文章</a></li>
                            <li><a href="#">发布相册</a></li>
                            <li><a href="#">发布微动态</a></li>
                            <li><a href="#">发布问答</a></li>
                            <li><a href="./publish_video.html">发布视频</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="navbar-nav navbar-right">
                <p class="navbar-text ">{{user.username}}</p>
            </div>
        </div>
    </nav>

    <!--    视频输入-->
    <div class="container">
        <form>
            <div class="alert" v-if="uploadStatus">
                <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
                正在处理上传数据，请稍后。
            </div>
            <h4>视频标题</h4>
            <div class="form-inline">
                <input class="form-control" placeholder="输入标题（5~3个字）" style="width: 100%" type="text" v-model:name="video.title">&nbsp;
            </div>
            <div>
                <div>
                    <h4>请选择需要上传的视频</h4>
                    <input accept="video/*"
                           ref="videoFile"
                           type="file"
                           v-on:change="readVideoFile()"
                           @cancel="doNothing()"
                           value="请选择文件">
                    &nbsp; {{videoFileState}}
                </div>
                <br>
                <div>
                    <h4>请选择需要上传的视频封面</h4>
                    <input accept="image/*"
                           ref="coverFile"
                           type="file"
                           v-on:change="readCoverFile()"
                           @cancel="doNothing()"
                           value="选择文件">
                    &nbsp; {{coverFileState}}
                </div>

            </div>
            <br>
            <div id="summernote">
                <h4>视频简介</h4>
                <textarea class="video-description" placeholder="请输入视频简介" style="width: 100%; height: 200px" v-model:name="video.desc"></textarea>
            </div>
            <br>
            <div style="margin-left: 42%">&nbsp;&nbsp;
                <button @click="uploadVideo()" class="btn btn-primary" type="button">
                    发布视频
                </button>
            </div>
        </form>

    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<script>
    let v = new Vue({
        el: "#app",
        data() {
            return {
                videoFile: '',
                videoFileState: '',
                coverFile: '',
                coverFileState: '',
                uploadStatus: false,
                user: {},
                video: {
                    title: '',
                    desc: '',
                    userId: '',
                    originalVideoName: '',
                    originalCoverName: '',
                }
            }
        },
        created: function () {
            axios.get("/wemedia/ddUser/me").then(function (response) {
                if (response.data.success == true) {
                    //获取个人信息成功
                    v.isLogin = true;
                    v.user = response.data.data;
                } else {
                    //未登录或获取个人信息失败
                    alert(response.data.msg)
                    location.href = "fakeLogin.html"
                }
            });
        },
        methods: {
            uploadVideo: function () {/*最终上传请求*/
                this.uploadStatus = true;
                this.video.userId = this.user.id;
                axios.post("/wemedia/ddVideo/uploadVideoInfo", v.video).then(function (response) {
                    if (response.data.state === 200) {
                        v.updatePublishLine(response.data.data)
                    } else {
                        alert(response.data.message)
                    }
                })
            },
            updatePublishLine: function (ddVideo) {
                axios.post('/wemedia/ddPublishLine/insertNewPublishLine', ddVideo).then(function (response) {
                    if (response.data.state === 200) {
                        alert("发布成功！将跳转主页")
                        location.href = "index.html"
                    } else {
                        alert(response.data.message)
                    }
                })
            },
            readVideoFile: function () {/*处理临时视频上传请求*/
                /*将之前选中的文件删除*/
                if (this.videoFile !== '') {
                    axios.get("/wemedia/ddVideo/deleteUploadedVideoFile?name=" + v.videoFile.name).then(function (response) {
                        if (response.data.state === 200) {
                            v.videoFileState = ''
                        } else {
                            alert(response.data.message);
                        }
                    })
                }
                /*建立并上传新文件*/
                this.videoFile = this.$refs.videoFile.files[0]
                let formData = new FormData()
                formData.append('file', this.videoFile)
                axios.post("/wemedia/ddVideo/uploadVideoFile", formData).then(function (response) {
                    if (response.data.state === 200) {
                        v.video.originalVideoName = response.data.data;
                        v.videoFileState = '上传成功';
                    } else {
                        alert(response.data.message);
                    }
                })
            },
            readCoverFile: function () {/*处理临时封面上传请求*/
                /*将之前选中的文件删除*/
                if (this.coverFile !== '') {
                    axios.get("/wemedia/ddVideo/deleteUploadedCoverFile?name=" + v.coverFile.name).then(function (response) {
                        if (response.data.state === 200) {
                            v.coverFileState = ''
                        } else {
                            alert(response.data.message);
                        }
                    })
                }
                /*建立并上传新文件*/
                this.coverFile = this.$refs.coverFile.files[0]
                let formData = new FormData()
                formData.append('file', this.coverFile)
                axios.post("/wemedia/ddVideo/uploadCoverFile", formData).then(function (response) {
                    if (response.data.state === 200) {
                        v.coverFileState = '上传成功'
                        v.video.originalCoverName = response.data.data;
                    } else {
                        alert(response.data.message);
                    }
                })
            },
            doNothing: function () {
            }
        }
    })

</script>
</body>
</html>